<template>
<div class="cart">
    <div v-if="show">
        <van-empty description="购物车空空如也~~" />
    </div>
    <div v-else>
        <van-checkbox-group class="card-goods" :value="checkedGoods" @change="onChangeGroup">
            <div v-for="item in cartList" :key="item.id" class="card-goods__item">
                <van-row>
                    <van-col span="18" offset="3">
                        <van-checkbox :name="item.id" />
                        <van-card :title="item.title" :desc="item.goods.descript" :num="item.count" :price="item.priceFormat" :thumb="item.thumb" class="van-multi-ellipsis--l2">
                            <div slot="footer">
                                <van-stepper v-model="item.count" @change="stepperEvent(item,arguments)" disableInput />
                            </div>
                        </van-card>
                    </van-col>
                </van-row>
            </div>
        </van-checkbox-group>
        <van-submit-bar :price="totalPrice" :disabled="!checkedGoods.length" :button-text="submitBarText" @submit="submit">
            <van-checkbox :value="checkedAll" style="padding:0 8px" @click="checkAll"></van-checkbox>
        </van-submit-bar>
    </div>
</div>
</template>

<script>
import store from "@/utils/store.js";
import utils from "@/utils/index.js";

export default {
    data() {
        return {
            show: false,
            checkedAllCarts: [],
            checkedGoods: [],
            cartList: [],
            checkedCarts: []
        };
    },
    computed: {
        submitBarText() {
            const count = this.checkedGoods.length;
            return "结算" + (count ? `(${count})` : "");
        },
        totalPrice() {
            if (this.checkedCarts.length == 0) {
                return 0.00;
            }
            return this.checkedCarts.reduce((total, item) => {
                return total + parseFloat(item.price) * item.count;
            }, 0);

        },
        checkedAll() {
            return this.checkedGoods.length > 0;
        },
    },
    onShow() {
        this.checkedGoods = [];
        this.cartList = [];
        this.checkedAllCarts = [];
        this.getCartData();
    },
    methods: {
        getCartData() {
            this.$API.get("user/cart/queryByUser").then((res) => {
                const cartList = res.data;
                if (cartList.length == 0) {
                    this.show = true;
                    wx.showToast({
                        title: "购物车空空如也~~",
                        duration: 2000
                    });
                } else {
                    for (let index = 0; index < cartList.length; index++) {
                        cartList[index].priceFormat = utils.formatPrice(cartList[index].price);
                        cartList[index].thumb = utils.fileMgrUrl + cartList[index].goods.pic;
                        this.checkedGoods.push(cartList[index].id+"");
                    }
                }
                this.cartList = cartList;
                this.checkedCarts = cartList;
            });
        },
        onChangeGroup(e) {
            this.checkedGoods = e.mp.detail;
            var j = this.checkedGoods.length;
            this.checkedCarts = [];
            if (j > 0) {
                for (var i = 0; i < j; i++) {
                    for (var m = 0; m < this.cartList.length; m++) {
                        if (this.checkedGoods[i] == this.cartList[m].id+"") {
                            this.checkedCarts.push(this.cartList[m]);
                        }
                    }
                }
            }

        },
        checkAll() {
            if (this.checkedGoods.length === this.cartList.length) {
                this.checkedAllCarts = this.checkedGoods;
                this.checkedGoods = [];
            } else {
                this.checkedGoods = this.checkedAllCarts;
            }
        },
        submit() {
            if (this.checkedGoods.length <= 0) {
                wx.showToast({
                    title: '您还没有选择结算商品哦！', //提示的内容,
                    icon: 'error', //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                });
            } else {
                var goodsIds = "";
                for (var j = 0, len = this.checkedGoods.length; j < len; j++) {
                    goodsIds += this.checkedGoods[j] + ",";
                }
                const url = "/pages/checkout/index?goodsIds=" + goodsIds.substring(0, goodsIds.length - 1);
                wx.navigateTo({
                    url
                });
            }

        },
        stepperEvent(item, arg) {
            this.$API
                .post("user/cart/update/" + item.id + "/" + arg[0].mp.detail)
                .then((res) => {
                    console.log("更改购物车商品数量是：", res)
                });
        },
        decrement() {
            store.commit("decrement");
        },
        formatPrice(price) {
            return utils.formatPrice(price);
        },
    },
};
</script>

<style>
body {
    background-color: #dce4e4;
}

.van-submit-bar {
    bottom: 48px;
}

.card-goods {
    background-color: #fff;
}

.card-goods__item {
    position: relative;
    top: 20px;
    background-color: #fafafa;
    border-radius: 17px;
    margin: 0 20px 20px 20px;
}

.van-card {
    margin-left: 20px;
}

.van-checkbox__label {
    width: 100%;
    height: auto;
    padding: 0 10px 0 15px;
    box-sizing: border-box;
}

.van-checkbox__icon {
    top: 50%;
    left: 10px;
    z-index: 1;
    position: absolute;
    margin-top: -10px;
}

.van-card__price {
    color: #f44;
}
</style>
